@keyframes scroll_bar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes scroll_show {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
html {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  display: grid;
  place-content: center;
  grid-auto-flow: row;
  gap: 30px;
  background: linear-gradient(135deg, #d1f2a5, #f56991);
}

@property --_x {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
figure {
  --w: 280px;
  --r: 0.5em;
  --g: conic-gradient(
    from 90deg at calc(100% - var(--r)) calc(100% - var(--r)),
    #0000 25%,
    #000 0
  );
  --d: calc(0.5lh + var(--r));
  display: grid;
  place-items: end end;
  font: bold 40px/1.5 monospace;
  cursor: pointer;
  transition: --_x 0.5s;
}
figure.alt {
  place-items: end start;
}
figure.alt img {
  --g: conic-gradient(
    from 180deg at var(--r) calc(100% - var(--r)),
    #0000 25%,
    #000 0
  );
  --_m: calc(2 * var(--r)) calc(2 * var(--r))
    radial-gradient(#000 69%, #0000 72%);
  -webkit-mask: calc(var(--d) + var(--_x)) 100%/var(--_m), 0% calc(100% - var(--d))/var(--_m), radial-gradient(0.5lh at 0 100%, rgba(0, 0, 0, 0) 99%, #000 calc(100% + 1px)) calc(var(--r) + var(--_x)) calc(-1 * var(--r)), var(--g) calc(var(--d) + var(--_x)) 0, var(--g) 0 calc(-1 * var(--d));
          mask: calc(var(--d) + var(--_x)) 100%/var(--_m), 0% calc(100% - var(--d))/var(--_m), radial-gradient(0.5lh at 0 100%, rgba(0, 0, 0, 0) 99%, #000 calc(100% + 1px)) calc(var(--r) + var(--_x)) calc(-1 * var(--r)), var(--g) calc(var(--d) + var(--_x)) 0, var(--g) 0 calc(-1 * var(--d));
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
figure.alt figcaption {
  transform: translate(calc(-0.5lh + var(--r)) calc(0.5lh - var(--r)));
}
figure * {
  grid-area: 1/1;
}
figure:hover {
  --_x: calc(var(--w) - 3 * var(--r) - 0.5lh);
}
figure img {
  --_m: calc(2 * var(--r)) calc(2 * var(--r))
    radial-gradient(#000 69%, #0000 72%);
  width: var(--w);
  aspect-ratio: 1;
  border-radius: var(--r);
  -webkit-mask: calc(100% - var(--d) - var(--_x)) 100%/var(--_m), 100% calc(100% - var(--d))/var(--_m), radial-gradient(0.5lh at 100% 100%, rgba(0, 0, 0, 0) 99%, #000 calc(100% + 1px)) calc(-1 * var(--r) - var(--_x)) calc(-1 * var(--r)), var(--g) calc(-1 * var(--d) - var(--_x)) 0, var(--g) 0 calc(-1 * var(--d));
          mask: calc(100% - var(--d) - var(--_x)) 100%/var(--_m), 100% calc(100% - var(--d))/var(--_m), radial-gradient(0.5lh at 100% 100%, rgba(0, 0, 0, 0) 99%, #000 calc(100% + 1px)) calc(-1 * var(--r) - var(--_x)) calc(-1 * var(--r)), var(--g) calc(-1 * var(--d) - var(--_x)) 0, var(--g) 0 calc(-1 * var(--d));
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
figure figcaption {
  height: 1lh;
  width: calc(1lh + var(--_x));
  text-align: center;
  letter-spacing: 1px;
  overflow: hidden;
  color: #fff;
  background: #bf4d28;
  transform: translate(calc(0.5lh - var(--r)) calc(0.5lh - var(--r)));
  border-inline: calc(0.5lh - 0.5ch) solid rgba(0, 0, 0, 0);
  -webkit-clip-path: inset(5px round 1lh);
          clip-path: inset(5px round 1lh);
}

.brick {
  width: 300px;
  height: 500px;
  background-image: linear-gradient(335deg, #d58256 6px, transparent 6px), linear-gradient(155deg, #d58256 6px, transparent 6px), linear-gradient(335deg, #d58256 6px, transparent 6px), linear-gradient(155deg, #d58256 6px, transparent 6px);
  background-size: 15px 15px;
  background-position: 0 0, 2px 9px, 7px 8px, 9px 1px;
  background-color: #e9bea8;
}

.head {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  z-index: 999;
  background-image: radial-gradient(transparent 1px, #fff 1px);
  background-size: 4px 4px;
  -webkit-backdrop-filter: saturate(50%) blur(4px);
          backdrop-filter: saturate(50%) blur(4px);
}

.bar {
  position: fixed;
  width: 100%;
  height: 4px;
  top: 40px;
  left: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  background-image: linear-gradient(to right, #b34d4d, #d92626, red);
  z-index: 999;
  animation: scroll_bar 2s linear;
  animation-timeline: scroll();
  will-change: width;
}

/* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
.loader {
  height: 30px;
  aspect-ratio: 6;
  --c: #0000 64%, #000 66% 98%, #0000 101%;
  background: radial-gradient(35% 146% at 50% 159%, var(--c)) 0 0, radial-gradient(35% 146% at 50% -59%, var(--c)) 25% 100%;
  background-size: 33.3333333333% 50%;
  background-repeat: repeat-x;
  animation: l1 1s infinite linear;
}

@keyframes l1 {
  to {
    background-position: 50% 0, 75% 100%;
  }
}